<!--
 * @Description: 网易严选-人气推荐
 * @Author: zzj
 * @Date: 2021-08-16 15:51:53
 * @LastEditors: zzj
 * @LastEditTime: 2021-08-17 11:11:38
 * @FilePath: \jiepuyiqing\tyut\zzj\网易严选\网易严选-人气推荐.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易严选-人气推荐</title>
    <!-- 内部样式表 -->
    <style>
        
        html,body{
            width: 1250px;
            margin: 0;
            padding: 0;
            color: #333;
        }

        /* 选择器 */
        .popularity{
            margin-bottom: 60px;
            height: 780px;
            background-color: #f4f0ea;
        }

        .header{
            margin-top: 60px;
            padding-top: 60px;
            height: 50px;
        }

        .header > .name{
            margin: 0px 20px 0px 100px;
            font-size: 28px;
            padding-top: 0px;
            display: inline-block;
        }

        .name:hover{
            color: #baa783;
            cursor: pointer;
        }

        .headerleft{
            display: inline-block;
            margin: 10px 20px 10px 10px;
            padding-left: 10px;
            
        }
        .headerleft:hover{
            color: #baa783;
            cursor: pointer;
        }

        .checked{
            color: #baa783;
            border-bottom: 2px solid #baa783;
        }
        
        .headerright{
            margin-right: 63px;
            margin-top: 10px;
            display: inline-block;
            float: right;

        }
        .headerright:hover{
            color: #baa783;
            cursor: pointer;
        }
        .headerleft,.headerright{
            font-size: 14px;
        }
        .product{
            margin-left: 100px;
        }
        #productItemFirst{
            margin-left: 0px;
            width: 390px;
            height: 570px;
        }
        #productItemFirst > img{ 
            width: 320px;
            height: 320px;
         }
        #productItemFirst > img:first-child{
            width: 48px;
            height: 48px;
            position: absolute;
        }
        #productItemFirst > :nth-child(2){
            margin:  40px 35px ;
        }
        #productItemFirst > :nth-child(2):hover{
            margin: 35px 30px;
            width: 336px;
            height: 336px;
            cursor: pointer;
        }
        .productItem{
            margin-left: 10px;
            background-color: white;
            width: 233px;
            height: 280px;
            float: left;
        }
        .productItem > img{
            display: block;
            margin: 0 26.5px;
            width: 180px;
            height: 180px;
        }
        .productItem > img:hover{

            width: 189px;
            height: 189px;
            cursor: pointer;
        }
        .product>:nth-child(4) ~ *{
            margin-top: 10px;
        }
        .title{
            width: 100%;
            text-align: center;
            border-top: 1px solid #f4f0ea;   
        }
        #productItemFirst > .title > .name{
            margin: 50px 71px 13px 71px;
            font-size: 18px;
            padding-top: 0px;
            display: inline-block;
        }

        .title > .name:hover{
            color: #baa783;
            cursor: pointer;
        }
        #productItemFirst > .title > .price{
            color: #db4d51;
            font-size: 18px;
        }
        .productItem > .title > .name{
            margin: 8px 30px 4px 30px;
            font-size: 16px;
            padding-top: 0px;
            display: inline-block;
        }
        .productItem > .title > .price{
            margin: 0;
            color: #db4d51;
            font-size: 16px;
        }
        .title > .titletop{
            margin-top: 2px;
            background-color: red;
            color: white;
            display: inline-block;
        }
        .title > .priceright{
            font-size: smaller;
            color: gray;
            text-decoration-line: line-through;
        }
    </style>
</head>
<body>
    <div class="popularity">
        <div class="header">
            <h3 class="name">人气推荐</h3>
            <div class="headerleft checked">编辑推荐</div>
            <div class="headerleft">热销总榜</div>
            <div class="headerright">更多推荐>></div>
        </div>
       <div class="product">
           <div id="productItemFirst" class="productItem">
               <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
               <img src="https://yanxuan-item.nosdn.127.net/7b5e6a09bc84fed728366cccf4fed217.png?type=webp&quality=95&thumbnail=320x320&imageView" alt="图片丢失">
               <div class="title">
                   <h4 class="name">口袋里的咖啡馆 浓缩胶囊咖啡液 无糖1袋</h4>
                   <p class="price">¥21.8</p>
                </div>
           </div>
           <div class="productItem">
               <img src="https://yanxuan-item.nosdn.127.net/6b9d93eae44995e560bcaf9154becee4.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="图片丢失">
               <div class="title">
                <span class="titletop">99选9</span>
                <h4 class="name">惊喜藏在蛋黄里，翻砂卤蛋 245克</h4>
                <p class="price">¥18</p>
                </div>
            </div>
           <div class="productItem">
            <img src="https://yanxuan-item.nosdn.127.net/e3fdeaf58254e6016666f560347dbe56.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="图片丢失">
            <div class="title">
                <h4 class="name">红杏干 180克</h4>
                <p class="price">¥20</p>
             </div>
           </div>
           <div class="productItem">
               <img src="https://yanxuan-item.nosdn.127.net/2c0147161faaa160cf10b6770f1e290d.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="图片丢失">
                <div class="title">
                    <span class="titletop">特价</span>
                    <h4 class="name">清新英国梨香 强力去污酵素洗衣液3kg/1kg</h4>
                    <p class="price">¥29.9</p>
                    <span class="priceright">¥35</span>
                </div>
            </div>
           <div class="productItem">
               <img src="https://yanxuan-item.nosdn.127.net/1a200be9152bfc96d99d64587750fc93.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="图片丢失">
                <div class="title">
                    <span class="titletop">新人特价</span>
                    <h4 class="name">婴儿级棉柔呵护 Airfree超薄卫生巾日用夜用</h4>
                    <p class="price">¥9.9</p>
                </div>
            </div>
           <div class="productItem">
                <img src="https://yanxuan-item.nosdn.127.net/50987f5b3a71dcd93372557250cbba06.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="图片丢失">
                <div class="title">
                    <span class="titletop">2件4折</span>
                    <h4 class="name">女式咖啡碳保暖内衣2.0</h4>
                    <p class="price">¥169</p>
                </div>
           </div>
           <div class="productItem">
                <img src="https://yanxuan-item.nosdn.127.net/bb9025c24057dfb89403055ac5b9f85c.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="图片丢失">
                <div class="title">
                    <span class="titletop">奥莱特卖</span>
                    <h4 class="name">添加茂金属更强韧，金属色垃圾袋</h4>
                    <p class="price">¥7.9</p>
                </div>
           </div>
       </div>
    </div>
</body>
</html>